#define etree(x)
       #if(!ifEmpty(x.tip))
			<div class="page-header-form">
				<h2>
					#(x.tip??)
				#if(!ifEmpty(x.small))
					<small>
						<i class="ace-icon fa fa-angle-double-right">
							#(x.small??)
						</i>
					</small>
				#end
				</h2>
			
			</div>
		#end
	    <div id="#(x.id)" style="height:#(x.height??'500px')"></div>
<script type="text/javascript" src="/static/echarts/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("#(x.id)");
var myChart = echarts.init(dom);
var app = {};
option = null;
myChart.showLoading();
var data = #(x.data);
myChart.hideLoading();
myChart.setOption(option = {
       tooltip: {
           trigger: 'item',
           triggerOn: 'mousemove'
       },
       series: [
           {
               type: 'tree',

               data: [data],

               top: '#(x.top)',
               left: '#(x.left)',
               bottom: '#(x.bottom)',
               right: '#(x.right)',

               symbolSize: 9,

               label: {
                   normal: {
                       position: 'left',
                       verticalAlign: 'middle',
                       align: 'right',
                       fontSize: 12
                   }
               },

               leaves: {
                   label: {
                       normal: {
                           position: 'right',
                           verticalAlign: 'middle',
                           align: 'left'
                       }
                   }
               },

               expandAndCollapse: #(x.expandAndCollapse),
               animationDuration: 550,
               animationDurationUpdate: 750
           }
       		]
  		});
	myChart.on("click", #(x.clickFunction));
	
</script>
#end
